<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title">{{ l('EditText') }}</div>
    </div>
    <div class="modal-body">
      <a-form :model="editItem" @submit="save()" autocomplete="off" ref="formRef">
        <!-- 键值 -->
        <a-form-item :label="l('Key')">
          {{ editItem?.key }}
        </a-form-item>
        <!-- 简体中文 -->
        <a-form-item :label="editItem?.baseLanguageNameText">
          {{ editItem?.baseValue }}
        </a-form-item>
        <a-form-item :label="editItem?.targetLanguageNameText">
          <a-textarea :rows="4" v-model:value="updateValue" :placeholder="editItem?.value" />
        </a-form-item>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="save()">
        <i class="acticon acticon-save"></i>
        <span>{{ l('Save') }}</span>
      </a-button>
    </div>
  </a-spin>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { LanguageServiceProxy, UpdateLanguageTextInput } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'edit-language-text',
    mixins: [ModalComponentBase],
    components: {},
    props: {
      editItem: Object,
    },
    data() {
      return {
        _languageServiceProxy: new LanguageServiceProxy(),
        updateValue: '',
      };
    },
    methods: {
      /**
       * 提交
       */
      save(): void {
        (this.$refs.formRef as any).validate().then(() => {
          let parmas = {
            key: this.editItem?.key,
            languageName: this.editItem?.targetLanguageName,
            sourceName: this.editItem?.sourceName,
            value: this.updateValue,
          };
          let updateLanguageinput: UpdateLanguageTextInput = new UpdateLanguageTextInput();
          updateLanguageinput.init(parmas);
          this.loading = true;
          this._languageServiceProxy
            .updateLanguageText(updateLanguageinput)
            .finally(() => {
              this.loading = false;
            })
            .then(() => {
              this.notify.success(this.l('SavedSuccessfully'));
              this.success(true);
            });
        });
      },
    },
  });
</script>
